<template>
  <el-drawer v-model="showDrawer" :title="title" direction="rtl" :size="size" :close-on-click-modal="false"
    :destroy-on-close="destroyOnClose" top="0" :append-to-body="appendToBody">
    <div class="h-full">
      <div class="body">
        <slot></slot>
      </div>
      <div v-if="isButton" class="h-[40px] flex justify-center items-cente">
        <el-button type="primary" :loading="loading" @click="handleSubmit">{{
          confirmText
        }}</el-button>
        <el-button @click="close">{{ cancleText }}</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import { fstat } from "fs";
import { ref } from "vue";

defineProps({
  title: {
    type: String,
    default: "新增"
  },
  size: {
    type: String,
    default: "45%"
  },
  destroyOnClose: {
    type: Boolean,
    default: false
  },
  confirmText: {
    type: String,
    default: "确认"
  },
  cancleText: {
    type: String,
    default: "取消"
  },
  appendToBody: {
    type: Boolean,
    default: false
  },
  isButton: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(["submit", "close"]);

const showDrawer = ref(false);
// 打开表单抽屉
const open = () => (showDrawer.value = true);
// 关闭表单抽屉
const close = () => (showDrawer.value = false);

const loading = ref(false);
const showLoading = () => (loading.value = true);
const hideLoading = () => (loading.value = false);

// 提交
const handleSubmit = () => emit("submit");

defineExpose({ open, close, showLoading, hideLoading });
</script>
<style scoped lang="scss">
.body {
  height: calc(100% - 40px);
  overflow: auto;
}
</style>
